<template>
	<view>
		<view class="">
			<image class="bg" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.NaZldZKolELq6a4af710d498911ed2c7857dc55048d1.png"
			 mode=""></image>
			<view class="head">
				<view class="head_left1" @tap="back()">
					<image src="../../../static/wode/return1.png" mode=""></image>
					<text>返回</text>
				</view>
				<text>我的财富</text>
				<text class="head_right1" @tap="toMingxi"></text>
			</view>
			<view class="head_mid1">
				<view class="head_mid_left">
					<text class="text1">猫币剩余：</text>
					<view class="num1">{{catnum}}</view>
				</view>
				<!-- <view class="head_mid_right" @tap="toDuihuan">
					立即兑换
				</view> -->
				<view class="head_mid_right" @tap="toMingxi">
					明细
				</view>
			</view>
			<text class="exchange">100猫币=1元</text>
		</view>
	<!-- 	<view class="">
			<view class="body_title">
				<text class="buytext">猫币购买</text>
				<text class="questtext">充值未到账？对猫币余额有疑问？</text>
			</view>
		</view> -->
		<!-- <view class="noSupport" v-if="platform=='ios'">
			ios平台暂不支持猫币充值
		</view>
		<view class="" v-else>
			<image class="toVipImg" src="/static/wode/toVip1.png" mode="" @tap="toVip"></image>
			<view class="body_item">
				<view class="num_item" v-for="(item,index) in moneyList" :key="index" :class="mindex==index?'active':''" @tap="getnum(index)">
					{{item.commodity_name}}
				</view>
				<input class="num_item" type="number" v-model="newMoney" placeholder="其它数量" @input="changeNum" />
			</view>
			<view class="" v-show="showbtn">
				<view class="Agreement">
					继续即表示同意<text @tap="toWebview('buy')">《Q陌猫币购买使用协议》</text>
				</view>
				<view class="topay btn" @tap="showTopay">
					立即支付{{money}}.00元
				</view>
			</view>
		</view> -->


		<!-- <view class="paybox" v-if="isShow">
			<view class="paybox_title">确认付款</view>
			<view class="paybox_num">
				￥<text>{{money}}.00</text>
			</view>
			<view class="pay_mode">
				<view class="pay_mode_title">支付方式</view>
				<view class="pay_mode_item" @tap="checkZhifu">
					<view class="mode_item_left">
						<image src="../../../static/wode/zhifu.png" mode=""></image>
						<text>支付宝支付</text>
					</view>
					<image v-if="iszhifu" class="mode_item_right" src="../../../static/wode/xuanze1.png" mode=""></image>
					<image v-else class="mode_item_right" src="../../../static/wode/xuanze.png" mode=""></image>
				</view>
				<view class="pay_mode_item" @tap="checkWeixin">
					<view class="mode_item_left">
						<image src="../../../static/wode/weixin.png" mode=""></image>
						<text>微信支付</text>
					</view>
					<image v-if="isweixin" class="mode_item_right" src="../../../static/wode/xuanze1.png" mode=""></image>
					<image v-else class="mode_item_right" src="../../../static/wode/xuanze.png" mode=""></image>
				</view>
				<view class="check" @tap="check">
					<image v-if="ischeck" src="../../../static/index/theselected.png" mode=""></image>
					<image v-else src="../../../static/index/uncheck.png" mode=""></image>
					<text>我已经阅读并同意《充值协议》</text>
				</view>
				<view class="btn shurepay" v-if="ischeck" @tap="toPay">
					确认充值
				</view>
				<view class="btn mask-btn" v-else>
					确认充值
				</view>
			</view>
		</view> -->
		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>
	</view>
</template>

<script>
	import mask from '../../../components/mask.vue'

	export default {
		components: {
			mask
		},
		data() {
			return {
				platform: '', //客户端平台
				catnum: "", //已有猫币
				numList: [6, 18, 25, 50, 88, 108, 208, 308],
				money: '',
				newMoney: '', //自定义数量
				mindex: -1,
				showbtn: false,
				isShowMask: false,
				isShow: false,
				ischeck: false,
				iszhifu: true,
				isweixin: false,
				paydata: '', //订单数据
				myInfo: '',
				mobile: '',
				moneyList: [], //商品列表
				user_id: uni.getStorageSync('user_id'),
			};
		},
		onShow() {
			this.myInfo = uni.getStorageSync('user_info');
			this.mobile = this.myInfo.mobile
			this.getMoneyList()
			this.getuserNum()
		},
		onReady() {
			this.platform = uni.getStorageSync('platform')
			console.log(this.platform)
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			toVip() {
				uni.navigateTo({
					url: '../getVip/getVip'
				})
			},
			getuserNum() {
				var me = this;
				var data = {
					user_id: this.user_id
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						console.log(res, '用户信息')
						me.catnum = res.data.data[0].cat_coin
					},
				})
			},
			getMoneyList() {
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userCommodity',
					actionName: 'query',
					data: {},
					successBack: function(res) {
						console.log(res, '商品列表')
						me.moneyList = res.data.data
						me.moneyList.length = 8
					},
				})

			},
			getnum(index) {
				this.mindex = index;
				this.money = this.moneyList[index].amount;
				this.showbtn = true;
			},
			// 			changenum() {
			// 				this.money = 0;
			// 				this.mindex = '';
			// 
			// 			},
			changeNum() {
				this.mindex = -1;
				var containSpecial = RegExp(
					/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)(\u4e00-\u9fa5)(A-Za-z)]+/
				);
				if (containSpecial.test(this.newMoney) == true || this.newMoney == "" || this.newMoney <= 0) {
					this.showbtn = false;
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none'
					})
				} else {
					this.showbtn = true;
					this.money = this.newMoney;
				}

			},
			closeMask() {
				this.isShow = false;
				this.isShowMask = false;
			},
			check() {
				if (this.ischeck == false) {
					this.ischeck = true;
				} else {
					this.ischeck = false;
				}
			},
			checkZhifu() {
				this.iszhifu = true
				this.isweixin = false
			},
			checkWeixin() {
				this.isweixin = true
				this.iszhifu = false
			},
			// #ifdef APP-PLUS

			showTopay() {
				this.isShow = true;
				this.isShowMask = true;
			},
			// #endif

			//  #ifdef MP-WEIXIN
			showTopay() {
				var me = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes, '用户信息');
						var rcharge_valid = loginRes.code
						// 获取用户信息

						var data = {
							rcharge_type: 'account',
							user_id: uni.getStorageSync('user_id'),
							amount: me.money,
							source: 'sr',
							rcharge_account: me.mobile,
							rcharge_valid: rcharge_valid,
						}

						me.myAjaxNewPost({ //微信订单数据
							model: 'user',
							controllerName: 'pay',
							actionName: 'wxPay',
							data: data,
							successBack: function(res) {
								console.log(res)
								var paydata = res.data.data
								console.log(paydata, '支付信息')
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: paydata.timeStamp,
									nonceStr: paydata.nonceStr,
									package: paydata.package,
									signType: 'MD5',
									paySign: paydata.paySign,
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
									},
									fail: function(err) {
										console.log(paydata.paySign, '支付')
										console.log('fail:' + JSON.stringify(err));
									}
								});
							},
						})
					}
				})
			},
			// #endif

			toPay() {
				var me = this
				var data = {
					amount: this.money,
					// amount: 0.01,
					user_id: uni.getStorageSync('user_id'),
					rcharge_type: 'account',
					source: 'android',
					rcharge_account: this.mobile
				}
				if (this.iszhifu) {
					this.myAjaxNewPost({ //支付宝订单数据
						model: 'user',
						controllerName: 'pay',
						actionName: 'aliPay',
						data: data,
						successBack: function(res) {
							console.log(res)
							me.paydata = res.data.data
							// toString(me.paydata)
							console.log(me.paydata)
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: me.paydata, //微信、支付宝订单数据
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									me.catnum = me.catnum + me.money
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}
					})

				} else if (this.isweixin) {
					this.myAjaxNewPost({ //微信订单数据
						model: 'user',
						controllerName: 'pay',
						actionName: 'wxH5Pay',
						data: data,
						successBack: function(res) {
							console.log(res)
							me.paydata = res.data.data
							console.log(me.paydata)

							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: me.paydata, //微信、支付宝订单数据
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
							// 							uni.requestPayment({//小程序
							// 								provider: 'wxpay',
							// 								timeStamp: String(Date.now()),
							// 								nonceStr: me.paydata.noncestr,
							// 								package: me.paydata.package,
							// 								signType: 'MD5',
							// 								paySign: me.paydata.sign,
							// 								success: function(res) {
							// 									console.log('success:' + JSON.stringify(res));
							// 
							// 								},
							// 								fail: function(err) {
							// 									console.log(me.paydata.noncestr, me.paydata.package, me.paydata.sign)
							// 									console.log('fail:' + JSON.stringify(err));
							// 								}
							// 							});
						}
					})


				}

			},
			toMingxi() {
				uni.navigateTo({
					url: '../mingxi/mingxi?type=account'
				})
			},
			toDuihuan() {
				uni.navigateTo({
					url: '../duihuan/duihuan?id=' + this.user_id
				})
			},
			toWebview(type) {
				uni.navigateTo({
					url: '../../../pages/Meet/newWebView/newWebView?type=' + type
				})
			},
		}
	}
</script>

<style scoped>
	.bg {
		height: 425upx;
		width: 100%;
	}

	.head {
		display: flex;
		position: absolute;
		top: 72upx;
		align-items: center;
		justify-content: space-between;
		padding: 0 24upx;
		width: 100%;
		color: #FFFFFF;
		box-sizing: border-box;
	}

	.head_left1 {
		display: flex;
		align-items: center;
		font-size: 32upx;
	}

	.head .head_right1 {
		font-size: 32upx;
		width: 94upx;
	}

	.head_left1 image {
		width: 20upx;
		height: 36upx;
		margin-right: 10upx;
	}

	.head_mid1 {
		padding: 0 24upx;
	}

	.head_mid_left {
		color: #FFFFFF;
		position: absolute;
		top: 204upx;
		left: 24upx;
		display: flex;
		align-items: flex-end;
	}

	.text1 {
		font-size: 32upx;
	}

	.num1 {
		width: 240upx;
		height: 75upx;
		font-size: 70upx;
		background-image: -webkit-linear-gradient(top, #5EFFFD, #F7D4FF);
		-webkit-background-clip: text;
		/*必需加前缀 -webkit- 才支持这个text值 */
		-webkit-text-fill-color: transparent;
		/*text-fill-color会覆盖color所定义的字体颜色： */
	}

	.head_mid_right {
		width: 148upx;
		height: 60upx;
		background: #FFFFFF;
		color: #47CECF;
		border-radius: 60upx;
		line-height: 60upx;
		position: absolute;
		top: 220upx;
		right: 24upx;
		font-size: 28upx;
		text-align: center;
	}

	.exchange {
		color: #FFFFFF;
		font-size: 22upx;
		position: absolute;
		right: 24upx;
		top: 325upx;
	}

	.body_title {
		padding: 0 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		border-bottom: 1upx solid #E6E6E6;
		height: 88upx;
		line-height: 88upx;
	}

	.buytext {
		font-size: 32upx;
		color: #333333;
	}

	.questtext {
		color: #999999;
		font-size: 24upx;
	}

	.toVipImg {
		width: 100%;
		height: 98upx;
		margin: 20upx 0;
	}

	.body_item {
		background: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 24upx;
	}

	.num_item {
		width: 199upx;
		height: 78upx;
		border-radius: 78upx;
		border: 1upx solid #E6E6E6;
		line-height: 78upx;
		color: #999999;
		font-size: 32upx;
		text-align: center;
		margin: 24upx 24upx 0 24upx;
	}

	.active {
		color: #FFDD53;
		border: 1upx solid #FFDD53;
	}

	.Agreement {
		position: absolute;
		bottom: 178upx;
		left: 24upx;
		color: #999999;
		font-size: 20upx;
	}

	.Agreement text {
		color: #47CECF;
	}

	.topay {
		position: absolute;
		bottom: 65upx;
		left: 24upx;
	}

	.paybox {
		background: #FFFFFF;
		width: 100%;
		height: 860upx;
		border: 1upx solid #E6E6E6;
		border-radius: 10upx;
		padding: 0 24upx;
		box-sizing: border-box;
		z-index: 10000;
		position: fixed;
		bottom: -90upx;
	}

	.paybox_title {
		text-align: center;
		font-size: 32upx;
		padding: 24upx 0 26upx 0;
		border-bottom: 1upx solid #E6E6E6;
	}

	.paybox_num {
		font-size: 47upx;
		color: #333333;
		text-align: center;
		padding: 30upx 0;
	}

	.paybox_num text {
		font-size: 88upx;
	}

	.pay_mode {
		font-size: 32upx;
		color: #000000;
	}

	.pay_mode_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.pay_mode_title {
		border-bottom: 1upx solid #E6E6E6;
		width: 100%;
		padding-bottom: 20upx;
	}

	.mode_item_left {
		display: flex;
		align-items: center;
		line-height: 88upx;

	}

	.mode_item_left image {
		width: 58upx;
		height: 58upx;
		margin-right: 20upx;
	}

	.mode_item_right {
		width: 40upx;
		height: 40upx;
	}

	.check {
		padding: 30upx 0;
	}

	.check image {
		width: 26upx;
		height: 26upx;
		margin-right: 10upx;
	}

	.check text {
		font-size: 28upx;
		color: #333333;
	}

	.shurepay {
		margin-bottom: 30upx;
	}

	.mask-btn {
		width: 702upx;
		height: 88upx;
		background: rgba(70, 206, 207, .5);
		border-radius: 10upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88upx;
		margin: 0 auto;
		font-size: 32upx;
	}

	.toVip {
		width: 226upx;
		height: 26upx;
		position: absolute;
		right: 24upx;
		padding-top: 40upx;
	}
	.noSupport{
		text-align: center;
		font-size: 28upx;
		color: #CCCCCC;
		line-height: 600upx;
	}
</style>
